<template>
    <div>
        <h2>会员等级修改</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">会员等级名称</td>
                    <td>
                        <input type="text" v-model="queryInfo.LevelName"/>
                    </td>
                </tr>

                <tr>
                    <td align="right">累计金额</td>
                    <td>
                        <input type="text" v-model="queryInfo.Money"/>
                    </td>
                </tr>

                <tr>
                    <td align="right"></td>
                    <td>
                        <input type="button" value="修改" class="btn btn-primary" @click="ok"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
//ref reactive 实现响应式数据
//onMounted是生命周期钩子函数  相当于文档就绪函数
import {ref,reactive,onMounted} from 'vue';

//axios 实现网络请求的  相当于jquery中的ajax
import axios from 'axios'

//moment实现时间格式化
import moment from 'moment'

//router是路由器  是实现页面跳转并且传参
//route是理由信息对象  作用是用来接收参数
import {useRouter,useRoute} from 'vue-router'
const router=useRouter();
const route=useRoute();

//生命一个数据接受后端返回的数据
let queryInfo=reactive({
    "Id": route.query.id,
    "LevelName": "",
    "Money": ''
})

onMounted(()=>{
    getlevel();
})

//确认修改
const ok=()=>{
    //判断有效性
    if(queryInfo.LevelName==""){
        alert('等级名称不能为空');
        return;
    }
    if(queryInfo.Money==""){
        alert('累计消费金额不能为空');
        return;
    }
    let reg=/^\d+$/g;
    if(!reg.test(queryInfo.Money)){
        alert('累计消费金额只能是整数');
        return;
    }

    //发送网络请求完成修改
    axios({
        url:'/api/Admin/UpdLevel',
        method:'put',
        data:queryInfo
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功');
            router.push('/');
        }
        else if(res.data==-1){
            alert('等级名称重复');
            return;
        }
        else{
            alert('失败');
        }
    })
    .catch(err=>{
        console.error(err);
    })
}

//实现数据的反填  这里的route.query.id的id必须和修改里（id:id）的前面的id对应
const getlevel=()=>{
    axios({
        url:'/api/Admin/FantianLevel',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        console.log(res);
        queryInfo.LevelName=res.data.LevelName;
        queryInfo.Money=res.data.Money

    })
    .catch(err=>{
        console.log(err);
    })
}

</script>

<style scoped>

</style>